<template>
    <div class="custom-button">
        <a v-if="!showPop" :class="['a-' + type]" @click="clickHandler">
            <slot>新增</slot>
        </a>
        <a-popconfirm v-else v-bind="$attrs" :title="tipMsg" :ok-text="okText" :cancel-text="cancelText" :placement="placement"
            @confirm="confirm" @cancel="cancel">
            <a class="a-danger">
                <slot>删除</slot>
            </a>
        </a-popconfirm>
    </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['click', 'confirm', 'cancel'])

interface Props {
    type?: string
    tipMsg?: string
    okText?: string
    cancelText?: string
    placement?: 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
}

const props = withDefaults(defineProps<Props>(), {
    type: "primary",
    tipMsg: "是否删除改条数据?",
    okText: "确定",
    cancelText: "取消",
    placement: "top"
})

const showPop = computed(() => ["danger"].includes(props.type))

const confirm = () => {
    emit("confirm")
}

const cancel = () => {
    emit("cancel")
}

const clickHandler = () => {
    emit("click")
}
</script>

<style scoped lang="less">
.custom-button {
    display: inline-block;
    margin-right: 10px;

    .a-primary {
        color: #0052a1;
    }

    .a-success {
        color: #65c13b;
    }

    .a-info {
        color: #909399;
    }

    .a-warning {
        color: #e5a33f;
    }

    .a-danger {
        color: #f46f6d;
    }
}
</style>